<!DOCTYPE html>
<html>
<head>
  <title>Vector Web App</title>
  <link rel="stylesheet" type="text/css" href="../css/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/8cdc8cbed9.js" crossorigin="anonymous"></script>
</head>
<body>

  <div id="outer">
    <div id="content" class="">
      <h1 class="center">Vector configuration</h1>
      <hr>
      <div class="main-nav-parent">
        <div class="main-nav-child"><a href="../index.html"><i class="fa-solid fa-reply"></i><br/>Back</a></div>
        <div class="main-nav-child"><a href="/sdkapp"><i class="fa-solid fa-bullseye"></i><br/>Select Robot</a></div>
        <div class="main-nav-child"><a href="#" onclick="goToControlPage()"><i class="fa-solid fa-gamepad"></i><br/>Vector Control<br/>(Beta)</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-volume'); return false;"><i class="fa-solid fa-volume-high" id="icon-volume" name="icon"></i><br/>Volume</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-eyes'); return false;"><i class="fa-solid fa-eye" id="icon-eyes" name="icon"></i><br/>Eye Color</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-face'); return false;"><i class="fa-solid fa-user" id="icon-face" name="icon"></i><br/>Face Manager</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-actions'); return false;"><i class="fa-solid fa-person-running" id="icon-actions" name="icon"></i><br/>Quick Actions</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-stim'); return false;"><i class="fa-solid fa-face-laugh-beam" id="icon-stim" name="icon"></i><br/>Stimulation</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-photos'); getPhotos(); return false;"><i class="fa-solid fa-images" id="icon-photos" name="icon"></i><br/>Photos</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-locale'); return false;"><i class="fa-solid fa-earth-americas" id="icon-locale" name="icon"></i><br/>Locale</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-time'); return false;"><i class="fa-solid fa-clock" id="icon-time" name="icon"></i><br/>Time Format</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-temp'); return false;"><i class="fa-solid fa-temperature-half" id="icon-temp" name="icon"></i><br/>Temperature Units</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-button'); return false;"><i class="fa-solid fa-circle-dot" id="icon-button" name="icon"></i><br/>Button Action</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-alexa'); return false;"><i class="fa-solid fa-house-signal" id="icon-alexa" name="icon"></i><br/>Alexa</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-location'); return false;"><i class="fa-solid fa-location-crosshairs" id="icon-location" name="icon"></i><br/>Set Location</a></div>
        <div class="main-nav-child"><a href="#" onclick="showSection('section-timezone'); return false;"><i class="fa-solid fa-hourglass" id="icon-timezone" name="icon"></i><br/>Set Time Zone</a></div>
      </div>
      <hr>

      <div id="section-volume" class="toggleable-section" style="display:none;">
        <h2 class="center">Volume</h2>
        <div id="currentVolume" class="center"></div>
        <div class="center">
	  <label> 
            <input type="radio" name="vol" id="Mute" value="Mute" onclick="sendForm('/api-sdk/volume?volume=0')">Mute
	  </label>
	  <label> 
            <input type="radio" name="vol" id="Low" value="Low" onclick="sendForm('/api-sdk/volume?volume=1')">Low
	  </label>
	  <label> 
            <input type="radio" name="vol" id="Medium Low" value="Medium Low" onclick="sendForm('/api-sdk/volume?volume=2')">Medium Low
	  </label>
	  <label> 
            <input type="radio" name="vol" id="Medium" value="Medium" onclick="sendForm('/api-sdk/volume?volume=3')">Medium
	  </label>
	  <label> 
            <input type="radio" name="vol" id="Medium High" value="Medium High" onclick="sendForm('/api-sdk/volume?volume=4')">Medium High
	  </label>
	  <label> 
            <input type="radio" name="vol" id="High" value="High" onclick="sendForm('/api-sdk/volume?volume=5')">High
	  </label>
        </div>
	<br>
	<hr>
      </div>

      <div id="section-eyes" class="toggleable-section" style="display:none;">
        <h2 class="center">Eye Color</h2>
        <div id="currentEyeColor" class="center"></div>
        <h4 class="center">Preset Eye Colors:</h4>
        <div class="center">
          <label>
            <input type="radio" name="eye" id="Teal" value="Teal" onclick="sendForm('/api-sdk/eye_color?color=0')">Teal<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Orange" value="Orange" onclick="sendForm('/api-sdk/eye_color?color=1')">Orange<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Yellow" value="Yellow" onclick="sendForm('/api-sdk/eye_color?color=2')">Yellow<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Lime Green" value="Lime Green" onclick="sendForm('/api-sdk/eye_color?color=3')">Lime Green<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Azure Blue" value="Azure Blue" onclick="sendForm('/api-sdk/eye_color?color=4')">Azure Blue<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Purple" value="Purple" onclick="sendForm('/api-sdk/eye_color?color=5')">Purple<br>
          </label>
          <label>
            <input type="radio" name="eye" id="Other Green" value="Other Green" onclick="sendForm('/api-sdk/eye_color?color=6')">Other Green<br>
          </label>
        </div>          

        <h4 class="center">Custom Eye Color:</h4>
        <div class="center" id="picker"></div><br />
        <div class="center">
          <button class="settings" onclick="sendCustomColor()">Submit</button>
        </div>
        <hr>
      </div>

      <div id="section-face" class="toggleable-section" style="display:none;">
        <h2 class="center">Face Manager</h2>
        <p class="center">Choose the face you would like to modify.</p>
        <div class="center">
          <select id="faceList" name="faceList"></select>
        </div>
        <div class="center">
          <button class="center" onclick="refreshFaceList()" type="submit">Refresh list</button>
        </div>
        <div class="center">
          <div id="faceButtons">
            <button onclick="deleteFace()" type="submit">Delete</button>
            <button onclick="renameFace()" type="submit">Rename</button>
          </div>
        </div>
        <hr>
      </div>

      <div id="section-actions" class="toggleable-section" style="display:none;">
        <h2 class="center">Quick Actions</h2>
          <div class="center">
            <button onclick="sendForm('/api-sdk/cloud_intent?intent=explore_start')" type="submit">Explore Start</button><br>
	    <button onclick="sendForm('/api-sdk/cloud_intent?intent=intent_imperative_dance')" type="submit">Listen for Beat</button><br>
	    <button onclick="sendForm('/api-sdk/cloud_intent?intent=intent_system_sleep')" type="submit">Go to Sleep</button><br>
	    <button onclick="sendForm('/api-sdk/cloud_intent?intent=intent_imperative_fetchcube')" type="submit">Fetch Cube</button><br>
	    <button onclick="sendForm('/api-sdk/cloud_intent?intent=intent_system_charger')" type="submit">Go Home</button><br>
          </div>
	  <hr>
      </div>

      <div id="section-stim" class="toggleable-section" style="display:none;">
        <h2 class="center">Stimulation</h2>
        <div class="center">
          <canvas id="stimChart"></canvas>
        </div>
	<hr>
      </div>

      <div id="section-photos" class="toggleable-section" style="display:none;">
        <h2 class="center">Photos</h2>
        <div class="center">
          <button onclick="getPhotos()" type="submit">Refresh List</button>
        </div>
        <div class="center">
          <div id="photoSection"></div>
        </div>
	<hr>
      </div>

      <div id="section-locale" class="toggleable-section" style="display:none;">
        <h2 class="center">Locale</h2>
        <div id="currentLocale" class="center"></div>
        <div class="center">
          <label>
	    <input type="radio" name="locale" id="en-US" value="English (US)" onclick="sendForm('/api-sdk/locale?locale=en-US')">English (US)<br>
          </label>
          <label>
            <input type="radio" name="locale" id="en-GB" value="English (GB)" onclick="sendForm('/api-sdk/locale?locale=en-GB')">English (GB)<br>
          </label>
          <label>
            <input type="radio" name="locale" id="en-AU" value="English (AU)" onclick="sendForm('/api-sdk/locale?locale=en-AU')">English (AU)<br>
          </label>
          <label>
            <input type="radio" name="locale" id="de-DE" value="German" onclick="sendForm('/api-sdk/locale?locale=de-DE')">German<br>
          </label>
          <label>
            <input type="radio" name="locale" id="fr-FR" value="French" onclick="sendForm('/api-sdk/locale?locale=fr-FR')">French<br>
          </label>
          <label>
            <input type="radio" name="locale" id="ja-FP" value="Japanese" onclick="sendForm('/api-sdk/locale?locale=ja-JP')">Japanese<br>
          </label>
        </div>
	<br>
	<hr>
      </div>

      <div id="section-time" class="toggleable-section" style="display:none;">
        <h2 class="center">Time Format</h2>
        <div id="currentTimeSet" class="center"></div>
        <div class="center">
          <label> 
            <input type="radio" name="time" id="12 Hour" value="12 Hour" onclick="sendForm('/api-sdk/time_format_12')">12 Hour<br>
	  </label>
	  <label> 
	    <input type="radio" name="time" id="24 Hour" value="24 Hour" onclick="sendForm('/api-sdk/time_format_24')">24 Hour<br>
	  </label>
        </div>
        <br>
        <hr>
      </div>

      <div id="section-temp" class="toggleable-section" style="display:none;">
        <h2 class="center">Temp Format</h2>
        <div id="currentTempFormat" class="center"></div>
        <div class="center">
          <label> 
            <input type="radio" name="temp" id="Celcius" value="Celcius" onclick="sendForm('/api-sdk/temp_c')">Celcius<br>
	  </label>
	  <label> 
	    <input type="radio" name="temp" id="Fahrenheit" value="Fahrenheit" onclick="sendForm('/api-sdk/temp_f')">Fahrenheit<br>
	  </label>
        </div>
        <br>
        <hr>
      </div>

      <div id="section-button" class="toggleable-section" style="display:none;">
        <h2 class="center">Button Action</h2>
        <div id="currentButton" class="center"></div>
        <div class="center">
	  <label> 
            <input type="radio" name="but" id="Hey Vector" value="Hey Vector" onclick="sendForm('/api-sdk/button_hey_vector')">Hey Vector<br>
	  </label>
	  <label> 
	    <input type="radio" name="but" id="Alexa" value="Alexa" onclick="sendForm('/api-sdk/button_alexa')">Alexa<br>
	  </label>
        </div>
        <br>
        <hr>
      </div>

      <div id="section-alexa" class="toggleable-section" style="display:none;">
        <h2 class="center">Alexa</h2>
        <div id="alexaStatus" class="center"></div>
        <a class="center" target="_blank" rel="noopener noreferrer" href="https://amazon.com/code">https://amazon.com/code</a>
        <div class="center">
          <button onclick="sendForm('/api-sdk/alexa_sign_in')" type="submit">Signin Alexa</button>
	  <button onclick="sendForm('/api-sdk/alexa_sign_out')" type="submit">Signout Alexa</button>
        </div>
	<hr>
      </div>

      <div id="section-location" class="toggleable-section" style="display:none;">
        <h2 class="center">Set Location</h2>
        <div id="currentLocation" class="center"></div>
        <small class="center">Example: San Francisco, California</small>
        <div class="center">
          <input class="tinput" id="locationInput" name="locationInput" type="text" placeholder="Put location here">
          </div>
          <div class="center">
          <button onclick="sendLocation()">Submit Location</button>
        </div>
	<hr>
      </div>

      <div id="section-timezone" class="toggleable-section" style="display:none;">
        <h2 class="center">Set Time Zone</h2>
        <div id="currentTimeZone" class="center"></div>
        <small class="center">Example: America/Chicago</small>
        <div class="center">
            <input class="tinput" id="tzInput" name="tzInput" type="text" placeholder="Put time zone here">
            </div>
            <div class="center">
            <button onclick="sendTimeZone()">Submit Time Zone</button>
        </div>
	<hr>
      </div>

    </div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./js/settings.js"></script>
<script src="./js/httprequest.js"></script>
<script src="./js/iro.min.js"></script>
<script src="./js/main.js"></script>
<script src="./js/faces.js"></script>
<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>
  
</body>
</html>
